// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Theme, ScreenSize } from "theme.slint";
import { SmallMain } from "small_main.slint";
import { BigMain } from "big_main.slint";
import { MidMain } from "mid_main.slint";
import { MidMain } from "mid_main.slint";
import { MobileMain } from "mobile_main.slint";
import { BarTileModel } from "widgets/widgets.slint";
import { Images } from "images.slint";
import { Theme } from "theme.slint";
import { HeaderAdapter } from "blocks/blocks.slint";
import { Navigation, MenuButton, Menu, Value } from "widgets/widgets.slint";
import {
    BalanceAdapter,
    OverviewAdapter,
    UsageAdapter,
    WeatherAdapter,
    MenuPageAdapter,
    MenuOverviewAdapter,
    SettingsAdapter,
} from "pages/pages.slint";
import { KioskOverlay } from "blocks/kiosk_overlay.slint";

export { OverviewAdapter, UsageAdapter, Value, WeatherAdapter, MenuPageAdapter, MenuOverviewAdapter, SettingsAdapter,
    BarTileModel, Images, HeaderAdapter }

export component MainWindow inherits Window {
    private property <length> big-break-point: 1366px;
    private property <length> mid-break-point: 799px;
    private property <length> mobile-break-point: 444px;
    private property <ScreenSize> screen-size: root.get-screen-size();

    title: "EnergyMNG Demo";
    min-width: 320px;
    min-height: 240px;
    background: Theme.palette.pure-black;
    preferred-width: 800px;
    preferred-height: 480px;

    /* The design is not finished yet
    if root.screen-size == ScreenSize.Desktop : BigMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }
    */

    if root.screen-size == ScreenSize.Mobile: HorizontalLayout {
        padding-left: root.safe-area-inset-left;
        padding-top: root.safe-area-inset-top;
        padding-right: root.safe-area-inset-right;
        padding-bottom: root.safe-area-inset-bottom;
        MobileMain {
            preferred-width: 100%;
            preferred-height: 100%;
        }
    }

    if root.screen-size == ScreenSize.EmbeddedMedium: MidMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if root.screen-size == ScreenSize.EmbeddedSmall: SmallMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if SettingsAdapter.kiosk-mode-checked: KioskOverlay { }

    pure function get-screen-size() -> ScreenSize {
        if (root.width <= root.mobile-break-point && root.width < root.height) {
            return ScreenSize.Mobile;
        }
        if (root.width < root.mid-break-point) {
            return ScreenSize.EmbeddedSmall;
        }
        return ScreenSize.EmbeddedMedium;
    }
}
